<template>
  <section class="class-11_21">
    <el-container>
      <el-header>
        <div slot class="head01">商品詳情</div>
      </el-header>
      <el-main class="box-main cell">
        <el-tabs v-model="activeName" class="box-container cell-1" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="base">
            <el-form
              :rules="ruleList"
              :model="addForm"
              label-width="120px"
              style="overflow-y:auto;"
              ref="dataFormRef"
            >
              <el-form-item label="商品名称" prop="goods_name" class="w500">
                <el-input
                  v-model="addForm.goods_name"
                  maxlength="60"
                  show-word-limit
                  placeholder="请输入商品名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="商品分类" prop="cat_id" class="w500">
                <el-cascader v-model="cateIds" :options="cateList" @change="handleChange"></el-cascader>
                <input type="hidden" v-model="addForm.cat_id" name="cat_id" />
              </el-form-item>
              <el-form-item label="商品简介" class="w500">
                <el-input
                  type="textarea"
                  v-model="addForm.goods_remark"
                  maxlength="60"
                  show-word-limit
                  placeholder="请输入商品名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="SPU" class="w500">
                <el-input v-model="addForm.spu" placeholder="请输入商品SPU"></el-input>
              </el-form-item>
              <el-form-item label="货号" class="w500">
                <el-input v-model="addForm.goods_sn" placeholder="请输入商品货号"></el-input>
              </el-form-item>
              <el-form-item label="商品品牌" class="w500" prop="brand_id">
                <el-select v-model="addForm.brand_id" placeholder="请选择商品品牌">
                  <el-option
                    :label="item.name"
                    :value="item.id"
                    v-for="item in brandList"
                    :key="item.id"
                  ></el-option>
                </el-select>
                <input type="hidden" v-model="addForm.brand_id" name="brand_id" />
              </el-form-item>
              <el-form-item label="本店售价" class="w500">
                <el-input-number
                  v-model="addForm.shop_price"
                  :controls="false"
                  :min="0"
                  :max="1000000000"
                  :step="0.01"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="市场价" class="w500">
                <el-input-number
                  v-model="addForm.market_price"
                  :controls="false"
                  :min="0"
                  :max="1000000000"
                  :step="0.01"
                ></el-input-number>
              </el-form-item>
              <el-form-item label="商品详情描述" style="width:800px;">
                <editor v-model="addForm.goods_content" style="height: 400px" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="通用相冊" name="imgs">
            <div class="cell align-center">
              <el-upload
                v-model:file-list="addForm.goods_images"
                name="comment_img_file"
                :before-upload="handleBeforeUpload"
                action="http://fenxiao.lanwenquan0105.top/api/User/uploadImgFile"
                list-type="picture-card"
              >
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <div style="padding:10px 0px;">
        <section class="cell justify-center">
          <el-button type="primary" @click="onSave">保存</el-button>
          <el-button @click="prevHost">取消</el-button>
        </section>
      </div>
    </el-container>
  </section>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, toRefs, computed } from 'vue';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage as $message, ElMessageBox, ElForm } from 'element-plus';
import Editor from '@/components/WangEditor/index.vue';
import useStore from '@/store';
import { UserConfig } from 'vite';
import $router from '@/router';
const { product } = useStore();
const dataFormRef = ref(ElForm);
// const actionApi = env.VITE_APP_BASE_API;
const state = reactive({
  activeName: 'base',
  cateIds: [] as number[],
  cateList: [],
  brandList: [] as any[],
  addForm: {
    goods_name: '',
    cat_id: '',
    cat_id_2: 0,
    cat_id_3: 0,
    goods_remark: '',
    goods_sn: '',
    spu: '',
    brand_id: '',
    shop_price: 0,
    market_price: 0,
    store_count: 0,
    goods_content: '',
    goods_images: []
  },
  ruleList: {
    goods_name: [
      { required: true, message: '请输入商品名称', trigger: 'blur' }
    ],
    cat_id: [{ required: true, message: '请选择商品分类', trigger: 'blur' }],
    shop_price: [
      { required: true, message: '请输入本店售价', trigger: 'blur' }
    ],
    market_price: [
      { required: true, message: '请输入市场价', trigger: 'blur' }
    ],
    brand_id: [{ required: true, message: '请选择商品品牌', trigger: 'blur' }]
  }
});
const { activeName, addForm, ruleList, cateIds, cateList, brandList } =
  toRefs(state);

// 获取品牌列表
function getBrandList() {
  product.getBrandList().then(({ result }) => {
    state.brandList = result;
  });
}
function prevHost() {
    $router .go(-1);
}
// 获取品牌分类
function getCategoryList() {
  product.getCategoryList().then(({ result }) => {
    var data = Object.values(result);
    function recursion(arr: any[]) {
      arr.forEach(_ => {
        const { id, name, level } = _;
        (_['value'] = id), (_['label'] = name);
        if (level === 1 && _.tmenu.length) {
          _['children'] = _.tmenu;
          recursion(_['children']);
        } else if (level === 2 && _.sub_menu.length) {
          _['children'] = _.sub_menu;
          recursion(_['children']);
        }
      });
    }
    recursion(data);
    state.cateList = data;
  });
}
//上传图片
function uploadSuccess(files: any, fileList: any[]) {
  $message({
    type: files.status === 1 ? 'success' : 'error',
    message: files.msg
  });
  state.addForm.goods_images.push(files.result[0]);
}

// 上传文件之前的钩子
function handleBeforeUpload(file: any) {
  const size = file.size / 1024 / 1024 / 2;
  if (size > 2) {
    $message({
      type: '警告',
      message: '图片大小必须小于2M'
    });
    return false;
  }
}
// 分类三级联动
function handleChange(val: any) {
  console.log(val);
}
function onSave(){
   dataFormRef.value.validate((valid: any) => {
    if (valid) {
      console.log(state.addForm);
      if (state.addForm.goods_id) {
        $message.success('修改成功，待完成');
      } else {
       $message.success('新增成功，待完成');
      }
    }
  });
}
onMounted(() => {
  getBrandList();
  getCategoryList();
});
</script>  
<style lang="scss">
.box-main {
  margin: 0px 20px;
  border-radius: 4px;
  background-color: #f2f2f6;
  padding: 15px;
  display: flex;
  flex-flow: column;
  overflow: hidden;
}
.w500 {
  width: 500px;
}
.del-img_icon {
  position: absolute;
  right: -17px;
  color: red;
  top: -6px;
  font-size: 16px;
  cursor: pointer;
  width: 40px;
  height: 40px;
}
</style>